<template>
	<view class="box">
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<uni-icons custom-prefix="custom-icon" type="back" size="30" style='flex: 0.5;' @click="back"></uni-icons>
				<view class="title">问题反馈</view>
				<view style='flex:0.5;'></view>
			</view>
		</view>
		<!-- 页面内容 -->
		<!-- tag标签 -->
		<uni-card :is-shadow="false" is-full>
			<view class="uni-h6">
				<text>分类标签</text>
				<view class="tag-view">
					<uni-tag @click="setInverted(item.id)" type="primary" :inverted="item.inverted" :text="item.name" v-for="(item,index) in obj"
						:key="index" />
				</view>
			</view>
		</uni-card>
		<!-- 问题和意见 -->
		<uni-card :is-shadow="false" is-full>
			<text>问题和意见</text>
			<view class="uni-title">请填写你的建议和意见</view>
		</uni-card>
		<!-- 联系方式 -->
		<uni-card :is-shadow="false" is-full >
			<view class="cards">
				<text class="phones">联系方式</text>
				<input class="uni-input" focus placeholder="自动获得焦点" />
			</view>
			
		</uni-card>
		
		<button  class="btn" >按钮</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11,
				obj: [{
						id: 1,
						name: '处理流程',
						inverted:true,
					}, {
						id: 2,
						name: '保修问题',
						inverted:true,
					}, {
						id: 3,
						name: '产品bug',
						inverted:true,
					},
					{
						id: 4,
						inverted:true,
						name: '账号问题',
					}, {
						id: 5,
						inverted:true,
						name: '其他建议'
					}
				],
				id: 0
			}
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			setInverted(id) {
				this.obj=this.obj.map(item=>{
					if(item.id==id){
						item.inverted = !item.inverted;
					}
					else{
						item.inverted=true
					}
					return item
				})
			},
		},
		mounted() {
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		}
	}
</script>

<style lang="scss">
	.btn{
		width: 300rpx;
		margin-top: 100rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: white;
		background-color: #3366ff;
	}
	.box {
		width: 100vw;
		height: 100vh;
		background-color: #f4f6f9;
		
	}
	.cards{
		height: 100rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.phones{
			display: inline-block;
			width: 30%;
		}
	}
	.uni-input{
		flex: 6;
	}
	.uni-title{
		height: 200rpx;
		margin-top: 20rpx;
	}

	.navBarBox .navBar {
		display: flex;

		.title {
			text-align: center;
			flex: 1;
			font-size: 18px;
		}

		align-items: center;
	}

	uni-card {
		.uni-card__content {
			padding: 0rpx !important;
		}

		padding: 0px;
		display: block;
		margin-top: 30rpx;

		.tag-view {

			padding-top: 30rpx;
			display: grid;
			grid-template-columns: 30% 30% 30%;
			grid-template-rows: 100rpx 100rpx;

			uni-tag {
				margin: auto;
				text-align: center;
				height: 70rpx;
				width: 30%;

				.uni-tag {
					border: 1px solid black;
					color: black;
					display: block;
					width: 130rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;

				}
			}
		}
	}
</style>
